<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>伪类选择器目标伪类</title>
  <style>
    /* 选择的是第一个单词 */
    div::first-letter{
      color: red;
    }
    /* 选择的是第一行 */
    div::first-line{
      background-color: yellow;
    }
    /* 选择的是输入框中默认输入文字的内容 */
    input::placeholder{
      color: skyblue;
    }

    div::selection{
      background-color: orange;
      color: green;
    }

    /* 选择的是p元素最开始的位置，随后创建一个￥元素 */
    p::before{
      content: "￥";
    }
    /* 选择的是p元素最后面的位置，随后创建一个.00元素 */

    p::after{
      content: ".00";
    }

  </style>
</head>
<body>
  <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum, nobis fugiat cupiditate iusto ex illo molestiae deleniti incidunt nemo atque aspernatur eligendi laboriosam pariatur fuga? Id consectetur architecto veniam ex.</div>
  <input type="text" placeholder="请输入你的名字">
  <p>199</p>
  <p>299</p>
  <p>399</p>
  <p>499</p>


  
</body>
</html>